<section class="gh-view">
    <header class="view-header">
        {{#gh-view-title openMobileMenu="openMobileMenu"}}<span>Tags</span>{{/gh-view-title}}
        <section class="view-actions">
            {{#link-to "settings.tags.new" class="btn btn-green" title="New Tag"}}New Tag{{/link-to}}
            {{!-- <button type="button" class="btn btn-green" {{action "newTag"}}>New Tag</button> --}}
        </section>
    </header>

    {{#gh-tags-management-container tags=tags selectedTag=selectedTag enteredMobile="enteredMobile" leftMobile="leftMobile" as |container|}}
        {{#gh-infinite-scroll
            fetch="loadNextPage"
            isLoading=isLoading
            classNames="tag-list"
            as |checkScroll|
        }}
            <section class="tag-list-content settings-tags {{if tagListFocused 'keyboard-focused'}}">
                {{#each tags as |tag|}}
                    {{gh-tag tag=tag onDelete=(action checkScroll)}}
                {{/each}}
            </section>
        {{/gh-infinite-scroll}}
        <section class="settings-menu-container tag-settings {{if tagContentFocused 'keyboard-focused'}} {{if container.displaySettingsPane 'tag-settings-in'}}">
            {{outlet}}
        </section>
    {{/gh-tags-management-container}}
</section>
